<template>
  <div style="text-align: center">
    <el-form ref="form" :model="form" label-width="150px">
      <el-row>
        <el-col :span="12" style="width: 100%">
          <el-form-item label="合同编号:" prop="serial">
            <el-input
              v-model="form.serial"
              class="companyInput"
              style="margin-left: -27px"
            >
              <template slot="prepend">德润第</template>
              <template slot="append">号</template>
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="保证人客户姓名:" prop="apply">
            <el-input v-model="form.apply"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="身份证号:" prop="card">
            <el-input v-model="form.card"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12" style="width: 100%">
          <el-form-item label="手机号码:" prop="tel">
            <el-input v-model="form.tel"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="联系地址:" prop="address">
            <el-input v-model="form.address"></el-input>
            <!-- <p class="company">元</p> -->
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>

    <el-form ref="form" :model="form" label-width="150px">
      <el-row>
        <el-col :span="12">
          <el-form-item label="服务费用:" prop="retain">
            <el-input v-model="form.retain" class="companyInput"></el-input>

            <p class="company">元</p>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="大写:" prop="big">
            <el-input
              v-model="form.big"
              placeholder="如整数,请在后面加元和整"
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="月付款金额:" prop="due">
            <el-input v-model="form.due" class="companyInput"></el-input>
            <p class="company">元</p>
          </el-form-item>
        </el-col>
        <el-col :span="12" >
          <el-form-item label="期数:" prop="rtp">
            <el-input v-model="form.rtp" class="companyInput"></el-input>
            <p class="company">期</p>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>

    <el-form ref="form" :model="form" label-width="150px">
      <el-row>
        <el-col :span="12">
          <el-form-item label="抵押人:" prop="loan">
            <el-input v-model="form.loan"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="身份证号码:" prop="album">
            <el-input v-model="form.album"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="联系电话:" prop="call">
            <el-input v-model="form.call"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="房屋结构:" prop="chart">
            <el-input v-model="form.chart"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="权利性质:" prop="nature">
            <el-input v-model="form.nature"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item
            label="建筑面积:"
            style="text-align: left"
            class="commpanyItem"
            prop="area"
          >
            <el-input v-model="form.area" style="width: 150px" ></el-input>
            <p class="company">m²</p>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="不动产权证号:" prop="non" style="width: 87%">
            <el-input v-model="form.non"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="房屋坐落:" prop="site" style="width: 87%">
            <el-input v-model="form.site"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="抵押期限起:" prop="mortgageDate">
            <el-date-picker
              v-model="form.mortgageDate"
              type="date"
              placeholder="选择日期"
              style="width: 200px"
              value-format="yyyy-MM-dd"
            >
            </el-date-picker>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="抵押期限/到期时间止:" prop="expireDate" style="width:200px">
            <el-date-picker
              v-model="form.expireDate"
              type="date"
              placeholder="选择日期"
              value-format="yyyy-MM-dd"
              
            >
            </el-date-picker>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="房屋评估价值:" prop="houseValue">
            <el-input v-model="form.houseValue" class="companyInput"></el-input>
            <p class="company">万元</p>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="" prop="mt">
            <el-checkbox
              class="checkboxSTyle"
              v-model="form.mt"
              :true-label="1"
              :false-label="0"
              >不动产抵押表下载(需要下载请勾选)</el-checkbox
            >
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <el-button type="primary" style="width: 150px" @click="downloadFun"
      >下载</el-button
    >
    <div
      style="display: none"
      v-html="VlHtml"
      ref="testref"
      id="indexhtml"
      @click="indexButton($event)"
    ></div>
  </div>
</template>

<script>
import {
  postDownloadLyf,
  PostDownloadRydL,
  postDownloadDBAJf,
  getOrderTable,
  getRecordModel,
  margin,
} from "../../../src/assets/js/api";

export default {
  name: "Agent",
  props: {
    showForm: {
      type: Object,
    },
    isContract: {
      type: Number,
    },
    orderData: {
      type: String,
    },
    dialogVisible: {
      type: Boolean,
    },
  },
  data() {
    return {
      VlHtml: "", //模板字符串Html!
      form: {
        ftr: null,
        date: "",
        mt: 0,
        signDate: "",
        serial: "",
        apply: "", //申请人!
        tel: "", //手机号码!
        card: "", //身份证号码!
        melt: "", //银行融资金额!
        address: "", //联系地址
        month: "",
        cash: "", //保证金!
        retain: "", //担保融资金额!
        big: "",
        due: "",
        sum: "", //总月还款!
        site: "", //房屋坐落
        non: "", //不动产权号!
        chart: "", //房屋结构!
        nature: "", //权利性质!
        area: "", //建筑面积!
        expireDate: "",
        loan: "",
        album: "",
        call: "",
        factorBig: "",
        factoring: "", //保理金额!
        houseValue:"", //房屋价值评估
        rtp:'',//期数
      },
    };
  },
  watch: {
    dialogVisible() {
      if (this.dialogVisible == true) {
        this.getData();
      }
    },
  },
  created() {
    this.getData();
  },
  methods: {
    //获取对应数据回显!
    async getData() {
      await getRecordModel(this.orderData).then((res) => {
        let obj = [];
        if (res.data.length > 0) {
          res.data.map((item) => {
            obj += item.approveTable;
          });
        }
        this.VlHtml = obj;
      });
      this.$refs["testref"].click();
      margin(this.orderData).then((res) => {
        if (this.isContract == 2 || this.isContract == 4) {
          this.form.cash = "/";
        } else {
          this.form.cash = res.data; //保证金回显!
        }
      }),
        getOrderTable(this.orderData).then((res) => {
          var infoData = res.data;
          // this.form.month=infoData.monthMoney;//银行月还款
          this.form.orderNum = infoData.orderNumber;
          this.form.apply = infoData.basicBorrowerName; //申请人回显!
          this.form.card = infoData.basicBorrowerCard; //身份证号码回显!
          this.form.tel = infoData.basicBorrowerPhone; //手机号码回显!
          this.form.site = infoData.pledgeHouseAddress; //房屋坐落回显!
          this.form.area = infoData.pledgeHouseArea; //建筑面积回显!
          this.form.non = infoData.pledgeHouseNumber; //不动产权号回显!
          this.form.melt = res.data.contractGuaranteeMoney * 10000; //银行融资金额回显!
          this.form.address = infoData.basicBorrowerAddress; //联系地址回显
          this.form.due = res.data.monthMoney; //保理月还款回显!
          this.form.retain = res.data.chargeMoney; //担保融资金额回显!
          this.form.big = this.changeNumMoneyToChinese(res.data.chargeMoney);
          this.form.factoring = res.data.factoringMoney; //保理金额回显!
          this.form.sum = res.data.surplusMoney; //总月还款回显!
          this.form.rtp = res.data.contractGuaranteeMonth; //期数!

          if (infoData.pledgeName && infoData.pledgeMateName) {
            this.form.loan = `${infoData.pledgeName},${infoData.pledgeMateName}`;
          } else {
            if (infoData.pledgeName) {
              this.form.loan = infoData.pledgeName;
            }
            if (infoData.pledgeMateName) {
              this.form.loan = infoData.pledgeMateName;
            }
          } //抵押人姓名!
          if (infoData.pledgeCard && infoData.pledgeMateCard) {
            this.form.album = `${infoData.pledgeCard},${infoData.pledgeMateCard}`;
          } else {
            if (infoData.pledgeCard) {
              this.form.album = infoData.pledgeCard;
            }
            if (infoData.pledgeMateCard) {
              this.form.album = infoData.pledgeMateCard;
            }
          } //抵押人身份证号!
          if (infoData.pledgePhone && infoData.pledgeMatePhone) {
            this.form.call = `${infoData.pledgePhone},${infoData.pledgeMatePhone}`;
          } else {
            if (infoData.pledgePhone) {
              this.form.call = infoData.pledgePhone;
            }
            if (infoData.pledgeMatePhone) {
              this.form.call = infoData.pledgeMatePhone;
            }
          } //抵押人电话!
          this.form.nature = infoData.landNature; //权利性质!
          this.form.chart = infoData.houseStructure; //房屋结构!
        });
    },
    indexButton(e) {
      let tagElements = e.target.getElementsByTagName("input");
      for (let i = 0; i < tagElements.length; i++) {
        const element = tagElements[i];
        if (element.getAttribute("name") == "contractBorrowNumber") {
          this.form.serial = element.value;
          break;
        }
      }
    },
    downloadFun() {
      // this.form.serial = `融立第${this.form.serial}`;
      if (this.isContract == 3) {
        if (this.form.mortgageDate && this.form.expireDate) {
          let mortgageDate = this.form.mortgageDate;
          mortgageDate = mortgageDate.split("-");
          mortgageDate = `${mortgageDate[0]}年${mortgageDate[1]}月${mortgageDate[2]}日`;
          let expireDate = this.form.expireDate;
          expireDate = expireDate.split("-");
          expireDate = `${expireDate[0]}年${expireDate[1]}月${expireDate[2]}日`;
          this.form.date = `自${mortgageDate}起\n至${expireDate}止`;
        }
        if (this.form.factoring) {
          this.form.ftr = this.form.factoring / 10000;
        }
        postDownloadLyf(this.form).then((res) => {
          let link = document.createElement("a");
          link.style.display = "none";
          link.href = res;
          link.setAttribute("download", "乐业分代理合同");
          document.body.appendChild(link);
          link.click();
          document.body.removeChild(link);
        });
      }
      if (this.isContract == 2) {
        if (this.form.mortgageDate && this.form.expireDate) {
          let mortgageDate = this.form.mortgageDate;
          mortgageDate = mortgageDate.split("-");
          mortgageDate = `${mortgageDate[0]}年${mortgageDate[1]}月${mortgageDate[2]}日`;
          let expireDate = this.form.expireDate;
          expireDate = expireDate.split("-");
          expireDate = `${expireDate[0]}年${expireDate[1]}月${expireDate[2]}日`;
          this.form.date = `自${mortgageDate}起\n至${expireDate}止`;
        }
        if (this.form.factoring) {
          this.form.ftr = this.form.factoring / 10000;
        }
        PostDownloadRydL(this.form).then((res) => {
          let link = document.createElement("a");
          link.style.display = "none";
          link.href = res;
          link.setAttribute("download", "融银贷代理合同");
          document.body.appendChild(link);
          link.click();
          document.body.removeChild(link);
        });
      }
      if (this.isContract == 4) {
        if (this.form.mortgageDate && this.form.expireDate) {
          let mortgageDate = this.form.mortgageDate;
          mortgageDate = mortgageDate.split("-");
          mortgageDate = `${mortgageDate[0]}年${mortgageDate[1]}月${mortgageDate[2]}日`;
          let expireDate = this.form.expireDate;
          expireDate = expireDate.split("-");
          expireDate = `${expireDate[0]}年${expireDate[1]}月${expireDate[2]}日`;
          this.form.date = `自${mortgageDate}起\n至${expireDate}止`;
        }
        if (this.form.factoring) {
          this.form.ftr = this.form.factoring / 10000;
        }
        postDownloadDBAJf(this.form).then((res) => {
          let link = document.createElement("a");
          link.style.display = "none";
          link.href = res;
          link.setAttribute("download", "担保安居分代理合同");
          document.body.appendChild(link);
          link.click();
          document.body.removeChild(link);
        });
      }
    },
    formResetFields(data) {
      if (data == true) {
        this.form.signDate = "";
        this.form.serial = "";
        this.form.apply = "";
        this.form.phone = "";
        this.form.card = "";
        this.form.melt = "";
        this.form.address = "";
        this.form.month = "";
        this.form.cash = "";
        this.form.retain = "";
        this.form.big = "";
        this.form.due = "";
        this.form.sum = "";
        this.form.site = "";
        this.form.non = "";
        this.form.chart = "";
        this.form.nature = "";
        this.form.area = "";
        this.form.expireDate = "";
        this.form.loan = "";
        this.form.album = "";
        this.form.call = "";
        // this.form.tel = "";
        // this.form.retain = "";
      }
    },
    changeNumMoneyToChinese(money) {
      if(!money){
        return "";
      }
      let cnNums = new Array("零", "壹", "贰", "叁", "肆", "伍", "陆", "柒", "捌", "玖"); //汉字的数字
      let cnIntRadice = new Array("", "拾", "佰", "仟"); //基本单位
      let cnIntUnits = new Array("", "万", "亿", "兆"); //对应整数部分扩展单位
      let cnDecUnits = new Array("角", "分", "毫", "厘"); //对应小数部分单位
      let cnInteger = "整"; //整数金额时后面跟的字符
      let cnIntLast = "元"; //整型完以后的单位
      let maxNum = 999999999999999.9999; //最大处理的数字
      let IntegerNum; //金额整数部分
      let DecimalNum; //金额小数部分
      let ChineseStr = ""; //输出的中文金额字符串
      let parts; //分离金额后用的数组，预定义
      let Symbol="";//正负值标记
      if (money == "") {
        return "";
      }

      money = parseFloat(money);
      if (money >= maxNum) {
        //alert('超出最大处理数字');
        return "";
      }
      if (money == 0) {
        ChineseStr = cnNums[0] + cnIntLast + cnInteger;
        return ChineseStr;
      }
      if(money<0)
      {
        money=-money;
        Symbol="负 ";
      }
      money = money.toString(); //转换为字符串
      if (money.indexOf(".") == -1) {
        IntegerNum = money;
        DecimalNum = '';
      } else {
        parts = money.split(".");
        IntegerNum = parts[0];
        DecimalNum = parts[1].substr(0, 4);
      }
      if (parseInt(IntegerNum, 10) > 0) { //获取整型部分转换
        let zeroCount = 0;
        let IntLen = IntegerNum.length;
        for (let i = 0; i < IntLen; i++) {
          let n = IntegerNum.substr(i, 1);
          let p = IntLen - i - 1;
          let q = p / 4;
          let m = p % 4;
          if (n == "0") {
            zeroCount++;
          }
          else {
            if (zeroCount > 0) {
              ChineseStr += cnNums[0];
            }
            zeroCount = 0; //归零
            ChineseStr += cnNums[parseInt(n)] + cnIntRadice[m];
          }
          if (m == 0 && zeroCount < 4) {
            ChineseStr += cnIntUnits[q];
          }
        }
        ChineseStr += cnIntLast;
        //整型部分处理完毕
      }
      if (DecimalNum != '') { //小数部分
        let decLen = DecimalNum.length;
        for (let i = 0; i < decLen; i++) {
          let n = DecimalNum.substr(i, 1);
          if (n != '0') {
            ChineseStr += cnNums[Number(n)] + cnDecUnits[i];
          }
        }
      }
      if (ChineseStr == '') {
        ChineseStr += cnNums[0] + cnIntLast + cnInteger;
      } else if (DecimalNum == '') {
        ChineseStr += cnInteger;
      }
      ChineseStr = Symbol +ChineseStr;
      return ChineseStr;
    }
  },
};
</script>

<style scoped type="less">
.el-form {
  margin-bottom: 28px;
  padding: 22px 22px 0 22px;
  border: 1px #eee solid;
}
.el-col {
  display: flex;
  flex-wrap: wrap;
}
.company {
  float: right;
  width: 30px;
  text-align: center;
}
.companyInput {
  width: calc(100% - 30px);
}
::v-deep .commpanyItem .el-form-item__content {
  width: 180px;
}
.hetongtd {
  width: 650px;
  height: 40px;
  border: 1px #eee solid;
}
.hetongtr {
  width: 100%;
  border: 1px red solid;
}
.hetongInput {
  width: 100px;
  height: 20px !important;
  border: 1px rgba(0, 0, 0, 0) solid;
}
.hetongTit {
  line-height: 40px;
  float: left;
  width: 30%;
  height: 40px;
  border-right: 1px #eee solid;
}
.hetongContent {
  float: left;
  width: 65%;
  text-align: center;
}
.hetongContent ::v-deep.el-input__inner {
  height: 35px;
  border: 1px rgba(0, 0, 0, 0) solid;
}
table {
  width: 100%;
}
.el-radio {
  line-height: 40px;
}
/deep/.el-checkbox__input.is-checked .el-checkbox__inner,
.el-checkbox__input.is-indeterminate .el-checkbox__inner {
  background-color: red;
  border-color: red;
}
/deep/.el-checkbox__input.is-checked + .el-checkbox__label {
  color: red;
}

/deep/ .checkboxSTyle .el-checkbox__input .el-checkbox__inner {
  border: 2px solid red;
}
/deep/.el-checkbox__label {
  font-size: 15px;
  color: red;
}
/deep/.el-checkbox {
  margin-left: -30%;
  font-weight: 600;
}

/* /deep/ .el-checkbox__input.is-checked .el-check */

</style>
